/* eslint-disable @typescript-eslint/naming-convention */
/* eslint-disable @typescript-eslint/restrict-plus-operands */
/* eslint-disable react/no-unknown-property */
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import React, { FC, useState } from 'react'
import style from '@/style/index.module.scss'
import { mainRouter } from '@/router/Router_config'
import { RouterItem } from '@/utils/index'
import { NavLink, useNavigate } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import type { MenuProps } from 'antd'
import { Dropdown } from 'antd'
import { changeAtnight, changeDaytime } from '@/switching/index'
const Header: FC = () => {
  const navigate = useNavigate()
  const { t, i18n } = useTranslation()
  const Chinese_btn = () => {
    void i18n.changeLanguage('chinese')
    localStorage.setItem('lang', 'chinese')
  }
  const English_btn = () => {
    void i18n.changeLanguage('english')
    localStorage.setItem('lang', 'english')
  }
  const [flag, setFlag] = useState(false)
  const items: MenuProps['items'] = [
    {
      key: '1',
      label: (
       <div onClick={Chinese_btn}>{t('language.chinese')}</div>
      )
    },
    {
      key: '2',
      label: (
        <div onClick={English_btn}>{t('language.english')}</div>
      )
    }
  ]
  const switching = () => {
    if (flag) {
      setFlag(false)
      changeDaytime()
    } else {
      setFlag(true)
      changeAtnight()
    }
  }
  const SearchBtn = () => {
    navigate('/search')
  }
  return (
    <div className={style.box}>
      <img
        src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
        alt=""
      />
      <ul className={style.nav}>
        {mainRouter?.map((item: RouterItem, index: number) => {
          return (
            // eslint-disable-next-line no-self-assign
            <li key={index} onClick={() => { index === 0 ? location.reload() : index = index }}>
              <NavLink to={item.path as string}>
              {item.flag === true ? t('header.' + item.title) : ''}
              </NavLink>
            </li>
          )
        })}
      </ul>
      <div className={style.navrigth}>

      <Dropdown menu={{ items }} >
        <svg
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
        >
          <path
            d="M547.797333 638.208l-104.405333-103.168 1.237333-1.28a720.170667 720.170667 0 0 0 152.490667-268.373333h120.448V183.082667h-287.744V100.906667H347.605333v82.218666H59.818667V265.386667h459.178666a648.234667 648.234667 0 0 1-130.304 219.946666 643.242667 643.242667 0 0 1-94.976-137.728H211.541333a722.048 722.048 0 0 0 122.453334 187.434667l-209.194667 206.378667 58.368 58.368 205.525333-205.525334 127.872 127.829334 31.232-83.84m231.424-208.426667h-82.218666l-184.96 493.312h82.218666l46.037334-123.306667h195.242666l46.464 123.306667h82.218667l-185.002667-493.312m-107.690666 287.744l66.56-178.005333 66.602666 178.005333z"
            fill="currentColor"
          ></path>
        </svg>

      </Dropdown>
        {
          !flag
            ? <svg
          onClick={switching}
          string="1671019878944"
          className="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2568"
          width="32"
          height="32"
        >
          <path
            d="M863.973001 448.017999c-14.591544 0-27.007156 4.303866-36.942846 9.711697a317.190088 317.190088 0 0 0-18.911409-66.733915c6.367801-10.767664 14.655542-21.471329 24.687229-27.279147 35.102903-20.271367 52.270367 6.783788 99.132902-20.287366 25.103216-14.495547 38.254805-61.726071 23.423268-87.437268-103.05278 59.51814-115.996375-6.927784-170.55467 24.575232a76.573607 76.573607 0 0 0-27.023156 26.655167 321.829943 321.829943 0 0 0-49.838442-47.822505c0.095997-12.575607 1.903941-26.127184 7.743758-36.238868 20.271367-35.118903 48.65448-20.287366 75.709634-67.133902 14.495547-25.103216 2.271929-72.573732-23.423268-87.421268-59.502141 103.05278-103.932752 52.014375-135.419768 106.57267a76.733602 76.733602 0 0 0-10.063686 36.830849 316.950095 316.950095 0 0 0-67.021905-16.703478c-6.223806-10.959658-11.487641-23.567264-11.487641-35.278898 0-40.542733 31.999-41.886691 31.999-95.997C575.982001 35.022906 541.647074 0.016 511.984 0.016c0 119.004281-63.998 97.004969-63.998 160.010999 0 14.591544 4.303866 26.991157 9.695697 36.926846-23.167276 3.967876-45.534577 10.23968-66.717915 18.911409-10.767664-6.351802-21.471329-14.639543-27.263148-24.671229-20.271367-35.118903 6.767789-52.270367-20.287366-99.132902C328.917721 66.925909 281.687197 53.77432 255.992 68.605856c59.502141 103.05278-6.927784 116.012375 24.575232 170.57067a76.829599 76.829599 0 0 0 26.655167 27.023155 321.829943 321.829943 0 0 0-47.822505 49.838443c-12.591607-0.095997-26.127184-1.903941-36.238868-7.743758-35.118903-20.287366-20.271367-48.65448-67.133902-75.709634-25.119215-14.495547-72.605731-2.271929-87.437267 23.423268 103.05278 59.502141 51.998375 103.932752 106.55667 135.435767a76.7976 76.7976 0 0 0 36.846848 10.063686 317.910065 317.910065 0 0 0-16.703478 67.021905c-10.975657 6.223806-23.583263 11.487641-35.294897 11.487641-40.542733 0-41.870692-31.999-95.997-31.999-29.007094 0-63.998 34.318928-63.998 63.982001 118.988282 0 97.004969 64.014 159.995 64.014 14.591544 0 27.007156-4.303866 36.942846-9.711697 3.967876 23.167276 10.23968 45.518578 18.895409 66.701916-6.351802 10.767664-14.639543 21.487329-24.687228 27.295147-35.118903 20.271367-52.270367-6.783788-99.132902 20.287366-25.119215 14.479548-38.270804 61.726071-23.423268 87.405268 103.05278-59.502141 115.996375 6.927784 170.570669-24.575232a76.669604 76.669604 0 0 0 27.023156-26.639167 320.997969 320.997969 0 0 0 49.838442 47.806506c-0.111997 12.591607-1.903941 26.127184-7.743758 36.254867-20.271367 35.118903-48.65448 20.271367-75.709634 67.133902-14.495547 25.103216-2.271929 72.589732 23.423268 87.421268 59.502141-103.03678 103.932752-51.998375 135.419768-106.540671a76.845599 76.845599 0 0 0 10.063686-36.862848c21.375332 7.871754 43.758633 13.535577 67.005906 16.703478 6.223806 10.975657 11.503641 23.583263 11.50364 35.310897 0 40.542733-31.999 41.870692-31.999 95.997 0 29.007094 34.318928 63.998 63.998 63.998 0-119.004281 63.998-97.004969 63.998001-159.995 0-14.607544-4.303866-27.007156-9.711697-36.958845a318.246055 318.246055 0 0 0 66.717915-18.89541c10.767664 6.351802 21.487329 14.639543 27.279148 24.687229 20.271367 35.118903-6.767789 52.270367 20.287366 99.132902 14.495547 25.119215 61.726071 38.270804 87.421268 23.439267-59.502141-103.05278 6.927784-116.012375-24.575232-170.570669a76.701603 76.701603 0 0 0-26.655167-27.023156 321.829943 321.829943 0 0 0 47.822505-49.838442c12.575607 0.095997 26.127184 1.903941 36.238868 7.743758 35.118903 20.287366 20.271367 48.65448 67.133902 75.709634 25.119215 14.479548 72.589732 2.271929 87.437267-23.423268-103.05278-59.502141-51.998375-103.932752-106.55667-135.419768a76.605606 76.605606 0 0 0-36.846848-10.063686 318.006062 318.006062 0 0 0 16.703478-67.005906c10.975657-6.239805 23.583263-11.503641 35.294897-11.50364 40.542733 0 41.870692 31.999 95.997 31.999 29.007094 0 63.998-34.334927 63.998-63.998-118.988282 0-96.988969-63.998-159.995-63.998001z"
            fill="#FFCC66"
            p-id="2569"
          ></path>
        </svg>
            : <svg string="1671194262465" onClick={switching} className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4407" width="32" height="32"><path d="M335.22 240.91c0-57.08 10.68-111.66 30.15-161.87-167.51 64.86-286.3 227.51-286.3 417.92 0 247.42 200.58 448 448 448 190.34 0 352.95-118.71 417.85-286.13-50.16 19.42-104.69 30.08-161.71 30.08-247.41 0-447.99-200.57-447.99-448z" fill="#f17fb4" p-id="4408"></path></svg>

        }
        <svg
          onClick={SearchBtn}
          string="1671020107924"
          className="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3477"
          width="32"
          height="32"
        >
          <path
            d="M960 876.8l-134.4-140.8c44.8-64 70.4-140.8 70.4-224 0-211.2-172.8-384-384-384S128 300.8 128 512s172.8 384 384 384c83.2 0 160-25.6 217.6-70.4l134.4 140.8c25.6 25.6 64 25.6 89.6 0C985.6 940.8 985.6 902.4 960 876.8zM512 768c-140.8 0-256-115.2-256-256 0-140.8 115.2-256 256-256s256 115.2 256 256C768 652.8 652.8 768 512 768z"
            p-id="3478"
          ></path>
        </svg>
      </div>
    </div>
  )
}

export default Header
